<template>
  <g
    class="protection"
    :transform="props.transform"
  >
    <defs>
      <path
        id="protection"
        :d="ds[index]"
        fill="#fff"
      />
    </defs>
    <use xlink:href="#protection" />
    <use xlink:href="#protection" transform="translate(16,0)rotate(90)" />
    <use xlink:href="#protection" transform="translate(16, 16)rotate(180)" />
    <use xlink:href="#protection" transform="translate(0, 16)rotate(270)" />
  </g>
</template>

<script setup>
  const ds = [
    'M0,8 v-2 h1 v-1 h1 v-1 h2 v-2 h1 v-1 h1 v-1 h2 v1 h-2 v1 h-1 v2 h-1 v1 h-2 v1 h-1 v2 h-1',
    'M0,2 h1 v-1 h1 v-1 h2 v1 h1 v1 h2 v1 h1 v1 h-1 v-1 h-2 v-1 h-1 v-1 h-2 v1 h-1 v2 h1 v1 h1 v2 h1 v1 h-1 v-1 h-1 v-2 h-1 v-1 h-1 v-2',
  ]

  const props = defineProps({
    index: {
      validator(value, props) {
        return [0, 1].includes(value)
      }
    },
    transform: {
      type: String,
      default: ''
    }
  })
</script>

<style lang="scss" scoped>

</style>